@import '../config';

.status-icon {
    &--failed {
        color: $argo-failed-color;
    }

    &--success {
        color: $argo-success-color;
    }

    &--waiting {
        color: $argo-waiting-color;
    }

    &--cancelled {
        color: $argo-cancelled-color;
    }

    &--running {
        color: $argo-running-color;
    }

    &--pending {
        color: $argo-status-warning-color;
    }

    &--init {
        color: $argo-init-color;
    }

    &--spin {
        animation-name: spin;
        animation-duration: 4000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    &--slow-spin {
        animation-name: spin;
        animation-duration: 10000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
    }
}

.icon {
    font-size: 2em;
}

.muted {
    color: $argo-color-gray-5;
}

.title {
    color: $argo-color-gray-7;
    font-size: 1.1em;
}
